<template>
  <ElSelect v-model="value" :placeholder="`请选择${column.label}`">
    <ElOption v-for="(label, value) in options" :value="value" :label="label" />
  </ElSelect>
</template>
<script setup lang="ts">
  import { ElOption, ElSelect } from 'element-plus';
  import { ref, watch, watchEffect, reactive } from 'vue';  
  import { Column } from '@/seed-application/types';

  const props = defineProps<{column: Column, modelValue?: any}>()
  const column = props.column

  const emits = defineEmits(['update:modelValue'])

  const value = ref<string>(props.modelValue)
  const options = reactive<Record<string, string>>(column.options || {})

  watchEffect(() => emits('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)
</script>